body,
html {
    width: 100%;
    height: 100%;
}

body {
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}

.reg {
    color: white;
    background: url('../../assets/imgs/sign-bg.jpg') no-repeat center / cover;
    // background-size: cover;

    .out {
        width: 90%;
        height: 100%;
        position: relative;

        .rpws {
            position: absolute;
            right: 0px;
            width: 80px;
            height: 28px;
            color: #fff;
            font-size: 20px;
            text-align: center;
            font-family: PingFangSC-regular;

        }

        .ltit {
            margin-top: 33px;
            width: 210px;
            height: 40px;
            color: #fff;
            font-size: 28px;
            text-align: left;
            font-family: PingFangSC-bold;
        }

        .msg {
            width: 250px;
            height: 22px;
            opacity: 0.6;
            color: #fff;
            font-size: 16px;
            text-align: left;
            font-family: PingFangSC-regular;
        }

        // 表格
        .form {
            width: 100%;
            position: absolute;
            top: 130px;

            .a {
                position: relative;

                .a1 {
                    position: absolute;
                    line-height: 50px;
                    left: 20px;
                    width: 35px;
                    height: 22px;
                    color: rgba(255, 255, 255, 1);
                    font-size: 16px;
                    text-align: left;
                    font-family: PingFangSC-regular;
                }

                .a2 {
                    width: 0;
                    height: 0;
                    position: absolute;
                    left: 55px;
                    top: 20px;
                    line-height: 50px;
                    border-top: 10px solid #fff;
                    border-bottom: 10px solid transparent;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                }
            }

            input {
                margin-bottom: 20px;
                height: 50px;
                line-height: 20px;
                border-radius: 25px;
                background-color: rgba(255, 255, 255, 0.5);
                padding-left: 20px;
                font-size: 16px;

                &::placeholder {
                    color: #fff;
                }
            }

            .kuang {
                width: 100%;
            }

            .kuang1 {
                width: 60%;
            }

            .kuang2 {
                width: 100%;
                height: 50px;
                line-height: 20px;
                border-radius: 25px;
                background-color: rgba(99, 255, 167, .7);
                text-align: center;
                font-size: 16px;
                color: #fff;
                cursor: pointer;
            }

            // 验证码
            #captcha1 {
                width: 123px;
                height: 50px;

            }

            .num {
                padding-left: 80px;
            }
        }

        .foot {
            width: 100%;
            height: 22px;
            color: #fff;
            font-size: 16px;
            text-align: left;
            font-family: PingFangSC-regular;
            position: absolute;
            bottom: 60px;
            text-align: center;
        }

        // 错误弹窗
        .alert {
            position: absolute;
            bottom: 370px;
            left: 25%;
            width: 50%;
            height: 100px;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            text-align: center;

            p {
                font-size: 25px;
                line-height: 50px;

                img {
                    width: 25px;
                    cursor: pointer;
                }
            }
        }
    }

}